<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>根据兄弟个数设置样式</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* html,
    body {
        width: 100%;
        height: 100%;
    } */

    .box{
        position: relative;
    }
    ul li{
        background-color: tan;
        height: 100px;
        display: inline-block;
        width: 100%;
    }
    ul li div{
        background-color:darkslategrey;
        height: 30px;
    }
    /* 表示总数为4个li的第一个li和他后面的兄弟-即总数为4个的全部li */
    ul li:first-child:nth-last-child(4),ul li:first-child:nth-last-child(4)~li{
        width: 24%;
    }
    /* 表示总数为10个li的第一个li和他后面的兄弟-即总数为10个的全部li */
    ul li:first-child:nth-last-child(10),ul li:first-child:nth-last-child(10)~li{
        width: 9%;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li>
                <div></div>
            </li>
        </ul>
    </div>
    <div class="box">
        <ul>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
        </ul>
    </div>
    <div class="box">
        <ul>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
        </ul>
    </div>
</body>
</html>